<template>
	<div class="encryption">
		<el-select v-model="value" placeholder="请选择" @change="print()" :popper-append-to-body="false">
			<el-option
				v-for="item in options"
				:key="item.value"
				:label="item.label"
				:value="item.value">
			</el-option>
		</el-select>
		<md5 v-if="value=='选项1'"></md5>
		<aes v-if="value=='选项2'"></aes>
	</div>
</template>

<script>
	import md5 from "../components/encryption/MD5.vue";
	import aes from "../components/encryption/AES.vue";
	
	export default {
		data() {
			return{
				options: [{
					  value: '选项1',
					  label: 'MD5加密'
					}, {
					  value: '选项2',
					  label: 'AES加密'
					}],
				value: '选项1',
			}
		},
		methods: {
			print(){
				// console.log(this.value);
			}
		},
		components:{
			md5,
			aes,
		},
	}
</script>

<style scoped>
	.encryption{
		width: 100%; 
		text-align: left;
	}
	.encryption .el-select{
		margin-bottom: 10px;
	}
</style>
